<template>
    <div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
			<el-form-item label="线索时间">
                <el-date-picker
					v-model="clueRange"
					type="datetimerange"
					value-format="yyyy-MM-dd HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					align="right">
				</el-date-picker>
            </el-form-item>
			<el-form-item label="分配时间">
                <el-date-picker
					v-model="dateRange"
					type="datetimerange"
					value-format="yyyy-MM-dd HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					align="right">
				</el-date-picker>
            </el-form-item>
			<el-form-item label="分配状态" prop="allocation_status">
              <el-select v-model="queryParams.allocation_status" placeholder="转发状态" clearable style="width: 160px">
                  <el-option label="未分配" value="0" />
                  <el-option label="已分配" value="1" />
              </el-select>
          	</el-form-item>
		 	 <el-form-item label="分配老师" prop="name">
                <el-input v-model="queryParams.teacher_name" placeholder="请输入姓名" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row type="flex" class="mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5">
                <el-button type="primary" @click="showLog">分配</el-button>
				<el-button plain type="primary" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>

		<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center"/>
			<el-table-column label="账户ID" align="center" prop="put_id" :show-overflow-tooltip="true" />
			<el-table-column label="账户名称" align="center" prop="fatname" :show-overflow-tooltip="true" />
			<el-table-column label="广告计划" align="center" prop="plan_name" :show-overflow-tooltip="true" />
			<el-table-column label="用户联系电话" align="center" width="120" prop="clue_phone_number" />
			<el-table-column label="线索时间" align="center" prop="commit_time" width="160" />
			<el-table-column label="转化追踪ID" align="center" prop="bd_vid" :show-overflow-tooltip="true" />
			<el-table-column label="分配状态" align="center" prop="allocation_status_title" />
			<el-table-column label="分配方式" align="center" prop="teacher_type_title" />
			<el-table-column label="分配时间" align="center" prop="teacher_time" width="160px" />
			<el-table-column label="分配老师" align="center" prop="teacher_name" />
		</el-table>
		<pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

		<el-dialog title="添加老师" :visible.sync="dialogVisible" width="625px" :close-on-click-modal="false">
			<el-select v-model="teacherVal" placeholder="请选择">
				<el-option
				v-for="item in teacherList"
				:key="item.teacher_id"
				:label="item.teacher_name"
				:value="item.teacher_id">
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getFormUserList, aifanfanTeacherList, assignTeacher } from "@/api/placement";

export default {
	data() {
		return {
			loading: true,
			clueRange:[],
			dateRange: [],
			queryParams: { page: 1, pageSize: 20},
			tableList:[],
			total:0,
			multiRows:[],
			dialogVisible: false,
			teacherList:[],
			teacherVal:''
		};
	},
    created() {
        this.getList()
		this.getTeacher()
    },
   	methods: {
      	getList() {
			this.loading = true;
			this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
			this.queryParams.teacher_time_start = this.dateRange[0];
    		this.queryParams.teacher_time_end = this.dateRange[1];

			this.clueRange = Array.isArray(this.clueRange) ? this.clueRange : [];
			this.queryParams.commit_time_start = this.clueRange[0];
    		this.queryParams.commit_time_end = this.clueRange[1];
            
			getFormUserList(this.queryParams).then(res => {
				this.tableList = res.data.data
				this.total = res.data.total
				this.loading = false;
			});
      	},
		/** 搜索按钮操作 */
		handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
			this.queryParams = { page: 1, pageSize: 20},
            this.dateRange = []
			this.clueRange = []
            this.handleQuery();
        },
		checkFilter(row){
			if(row.allocation_status){
				return 0
			}else{
				return 1
			}
		},
		handleSelectionChange(rows){
            this.multiRows = rows
        },
		getTeacher(){
			aifanfanTeacherList(this.queryParams).then(res => {
				this.teacherList = res.data
			});
		},
		showLog(){
			if(!this.multiRows.length){
				this.$modal.msgError("请至少选择一条数据");
				return false
			}
			this.dialogVisible = true
		},
		submit(){
			let ids = this.multiRows.map(item => item.id)
			const params = {
				ids: ids,
				teacher_id:this.teacherVal
			}
			assignTeacher(params).then(res => {
				this.dialogVisible = false
				this.$modal.msgSuccess("分配成功");
				this.getList();
			})
			
		},
		/** 导出按钮操作 */
        handleExport() {
			let ids = this.multiRows.map(item => item.id)
			this.queryParams.ids = ids
            this.download('aifanfan/teacher/exportExcel', {
                ...this.queryParams
            }, `潜客管理.xlsx`)
        },
 	}
};
</script>
